<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <base href="/oa1/" />
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">

    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">添加意向客户信息</h4>
    </div>

    <div class="panel-body">
        <form action="kh/customer/addKhCustomer" id="myform" method="post" class="form-horizontal" role="form">
            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="customerName" class="col-md-4 control-label">客户名称</label>
                    <div class="col-md-8">
                        <input type="text" id="customerName" name="customerName" class="form-control"
                               placeholder="请输入客户名称" value="">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="phone" class="col-md-4 control-label">客户电话</label>
                    <div class="col-md-8">
                        <input type="text" id="phone" name="phone" class="form-control"
                               placeholder="请输入客户电话" value="">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="vocation" class="col-md-4 control-label">所属行业</label>
                    <div class="col-md-8">
                        <select name="vocation" class="form-control" id="vocation">
                            <option value="">--所属行业--</option>
                            <option value="1">制造业</option>
                            <option value="2">娱乐业</option>
                            <option value="3">IT业</option>
                            <option value="4">教育</option>
                            <option value="5">外贸</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="companyType" class="col-md-4 control-label">公司性质</label>
                    <div class="col-md-8">
                        <select name="companyType" class="form-control" id="companyType">
                            <option value="">--公司性质--</option>
                            <option value="1">国有</option>
                            <option value="2">外资</option>
                            <option value="3">合资</option>
                            <option value="4">私营</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="city" class="col-md-4 control-label">客户地区</label>
                    <div class="col-md-8">
                        <input type="text" id="city" name="city" class="form-control"
                               placeholder="请输入客户地区" value="">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="address" class="col-md-4 control-label">客户地址</label>
                    <div class="col-md-8">
                        <input type="text" id="address" name="address" class="form-control"
                               placeholder="请输入客户地址" value="">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="zipcode" class="col-md-4 control-label">客户邮编</label>
                    <div class="col-md-8">
                        <input type="text" id="zipcode" name="zipcode" class="form-control"
                               placeholder="请输入客户邮编" value="">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="fax" class="col-md-4 control-label">客户传真</label>
                    <div class="col-md-8">
                        <input type="text" id="fax" name="fax" class="form-control"
                               placeholder="请输入客户传真" value="">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="email" class="col-md-4 control-label">客户邮箱</label>
                    <div class="col-md-8">
                        <input type="text" id="email" name="email" class="form-control"
                               placeholder="请输入客户邮箱" value="">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="url" class="col-md-4 control-label">单位网站</label>
                    <div class="col-md-8">
                        <input type="text" id="url" name="url" class="form-control"
                               placeholder="请输入单位网站" value="">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="bank" class="col-md-4 control-label">开户行</label>
                    <div class="col-md-8">
                        <input type="text" id="bank" name="bank" class="form-control"
                               placeholder="请输入开户行" value="">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="account" class="col-md-4 control-label">客户银行账号</label>
                    <div class="col-md-8">
                        <input type="text" id="account" name="account" class="form-control"
                               placeholder="请输入客户银行账号" value="">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="introduce" class="col-md-4 control-label">客户介绍</label>
                    <div class="col-md-8">
							<textarea class="form-control" id="introduce" name="introduce" rows="5"
                                      placeholder="请输入客户介绍"></textarea>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="credit" class="col-md-4 control-label">客户信用</label>
                    <div class="col-md-8">
                        <select name="credit" class="form-control" id="credit">
                            <option value="">--客户信用--</option>
                            <option value="1">良好</option>
                            <option value="2">一般</option>
                            <option value="3">较差</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <hr>
                </div>
            </div>

            <div id="details">
                <div class="col-md-12" style="display: none;" id="detailsTitle">
                    <div align="center">
                        <h4><label class="text-primary">客户联系人</label></h4><br><br>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <div class="col-md-10 col-md-offset-2">
                        <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
                        <button type="button" id="addContacts" class="btn btn-success">添加客户联系人</button>
                        <button type="submit" id="addKhCustomerbtn" class="btn btn-success">提交信息</button>
                        <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 联系人模板 -->
<div id="detailsdemo" style="display: none;">
    <div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="contactName" class="col-md-4 control-label">联系人名称</label>
                <div class="col-md-8">
                    <input type="text" name="contactName" class="form-control" id="contactName"
                           placeholder="请输入联系人名称">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="job" class="col-md-4 control-label">联系人职位</label>
                <div class="col-md-8">
                    <input type="text" name="job" class="form-control" id="job"
                           placeholder="请输入联系人职位">
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="cphone" class="col-md-4 control-label">联系人电话</label>
                <div class="col-md-8">
                    <input type="text" name="cphone" class="form-control"
                           placeholder="请输入联系人电话" id="cphone">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="cemail" class="col-md-4 control-label">联系人邮箱</label>
                <div class="col-md-8">
                    <input type="text" name="cemail" class="form-control"
                           placeholder="请输入联系人邮箱" id="cemail">
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="czipcode" class="col-md-4 control-label">联系人邮编</label>
                <div class="col-md-8">
                    <input type="text" name="czipcode" class="form-control"
                           placeholder="请输入联系人邮编" id="czipcode">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="caddress" class="col-md-4 control-label">联系人地址</label>
                <div class="col-md-8">
                    <input type="text" name="caddress" class="form-control"
                           placeholder="请输入联系人地址" id="caddress">
                </div>
            </div>
            <div class="form-group col-md-2">
                <input type="button" onclick="deteleContacts(this)" class="btn btn-danger" value="删除此明细">
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-group col-md-12">
                <hr>
            </div>
        </div>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="alertMsgModalLabel">提示</h4>
            </div>
            <div class="modal-body" id="alertmsg"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    // 删除联系人明细
    function deteleContacts(o){
        $(o).parent().parent().parent().remove();
        if($("#details").children().length === 1){
            $("#detailsTitle").hide();
        }
    }

    // AJAX错误统一处理
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            console.log("服务器错误!");
        }
    });

    $(document).ready(function() {
        // 添加联系人逻辑
        $("#addContacts").click(function(){
            $("#detailsTitle").show();
            // 生成联系人索引（避免重复）
            var index = $("#details .col-md-12").length - 1; // 排除标题行
            // 克隆模板并替换索引占位符
            var template = $("#detailsdemo").html().replace(/\$\{index\}/g, index);
            $("#details").append(template);

            // 为新联系人添加验证
            $('#myform').bootstrapValidator('addField', `contacts[${index}].contactName`, {
                validators: { notEmpty : { message : '联系人名称不能为空!' } }
            });
            $('#myform').bootstrapValidator('addField', `contacts[${index}].cphone`, {
                validators: { regexp : { regexp : /^(^(\d{3,4}-)?\d{7,8})$|^((1[0-9][0-9]\d{8}$))$/, message : '电话格式不正确' } }
            });
            $('#myform').bootstrapValidator('addField', `contacts[${index}].zipcode`, {
                validators: { regexp : { regexp : /^[1-9]\d{5}$/, message : '邮编格式不正确' } }
            });
            $('#myform').bootstrapValidator('addField', `contacts[${index}].email`, {
                validators: { emailAddress : { message : 'E-mail格式不正确!' } }
            });
        });

        // 表单验证配置
        $("#myform").bootstrapValidator({
            message : '输入值无效',
            feedbackIcons : {
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                customerName : {
                    validators : { notEmpty : { message : '请填写意向客户名称!' } }
                },
                phone : {
                    validators : { regexp : { regexp : /^(^(\d{3,4}-)?\d{7,8})$|^((1[0-9][0-9]\d{8}$))$/, message : '电话格式不正确' } }
                },
                zipcode : {
                    validators: { regexp : { regexp : /^[1-9]\d{5}$/, message : '邮编格式不正确' } }
                },
                email : {
                    validators: { emailAddress : { message : 'E-mail格式不正确!' } }
                },
                fax : {
                    validators : { regexp : { regexp : /^(\d{3,4}-)?\d{7,8}$/, message : '传真格式不正确' } }
                },
                url : {
                    validators : { uri : { message : '网站格式不正确' } }
                }
            },
            submitHandler : function(validator,form, submitButton) {
                validator.defaultSubmit();
            }
        });

        // 重置按钮逻辑（完全保持原有逻辑）
        $("#resetbtn").click(function() {
            $("#myform").data("bootstrapValidator").resetForm();
            $("#details").html('<div class="col-md-12" style="display: none;" id="detailsTitle">' +
                '<div align="center"><h4><label class="text-primary">客户联系人</label></h4><br><br></div></div>');
        });
    });
</script>
</html>